<!DOCTYPE html>
<html>
<head>
<title>My Videos</title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://sites.google.com/site/onlinegames01org/yt-app.css" />
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '500', '280', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              '<img src="', 
              thumbnailUrl, '" width="130" height="97"/><br /><span class="titlec">', title, '...</span>', '</span></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body>
<div id="yt-container">
    <div id="playerContainer">
        <object id="player"></object>
    </div>
    <div id="videos"></div>
</div>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/standardfeeds/BR/most_viewed?time=all_time&alt=json-in-script&callback=showMyVideos&start-index=50&max-results=50&format=5">
</script>
</body>
</html>
